/**
 * 鼠标绑定横向滚动事件
 * @param el
 */
export const addMouseWheelEvent = (el: HTMLElement) => {
  const container = el
  if (!container) return
  // 添加 wheel 事件监听器
  container.addEventListener(
    'wheel',
    function (event: any) {
      // 现代浏览器中获取滚动距离
      const delta = Math.sign(-event.deltaY) // deltaY通常表示垂直方向上的滚动量

      // 对于一些老版本或非标准兼容性处理
      if (event.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
        // 滚动距离以像素为单位
        console.log('Scroll distance in pixels:', event.deltaY)
      } else if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
        // 滚动距离以行（line）为单位
        console.log('Scroll distance in lines:', -event.deltaY * 16) // 这里假设一行是16像素高度
      } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
        // 滚动距离以页面（page）为单位
        console.log('Scroll distance in pages:', event.deltaY)
      }

      // 阻止默认的滚动行为（如果需要自定义滚动）
      event.preventDefault()

      // 可以在这里根据滚动方向和距离做相应的处理
      container.scrollLeft -= delta * 10
    },
    { passive: false }
  ) // 注意：为了能够调用 preventDefault()，需要设置 passive 为 false

  // 如果需要兼容旧版IE，可能需要使用 'mousewheel' 事件
  if ('onmousewheel' in container) {
    container.addEventListener('mousewheel', function (mouseWheelEvent: any) {
      // IE中的滚动距离获取方式不同，它使用的是 wheelDelta
      const ieDelta = -mouseWheelEvent.wheelDelta
      container.scrollLeft -= ieDelta * 10

      console.log('Scroll distance in Internet Explorer style:', ieDelta / 120) // IE的delta值一般以120分之一行的高度为单位
    })
  }
}
